<template>
	<view class="student">
		<view class="plus" @click="addOrUpdate">
			<view class="plus-name">
				添加
			</view>
			<view class="plus-icon"></view>
		</view>
		<view class="items" v-if="list.length">
			<checkbox-group @change="checkboxChange">
				<label class="item" v-for="item in list" :key="item.id">
					<view v-if="eventId">
						<checkbox :value="item.id" :checked="item.checked" color="#74BB2A" />
					</view>
					<view class="item-info">
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="idcard">{{item.idCardEsensitize}}</view>
						</view>
						<view class="action">
							<view class="edit" @click.stop="addOrUpdate(item)">
								<image src="/static/images/edit-icon.png" mode=""></image>
							</view>
							<view class="del" @click.stop="handleDelete(item.id)">
								<image src="/static/images/del-icon.png" mode=""></image>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view class="empty" v-else>
			<u-empty mode="search" :iconSize="120" text="您还未添加研学人"></u-empty>
		</view>
		<view class="footer-btn" v-if="eventId" @click="handleSelect">
			确认
		</view>
		<u-modal :show="show" title="确认删除？" showCancelButton @confirm="confirm" @cancel="show=false" ref="uModal"
			:asyncClose="true"></u-modal>
	</view>
</template>

<script>
	import request from '@/utils/api.js';
	import { esensitize } from '@/utils/index.js';

	export default {
		data() {
			return {
				eventId: '',
				list: [],
				show: false,
				id: '',
				students: [],
				studentIds: [],
			}
		},
		onLoad(options) {
			this.eventId = options.eventId;
			this.students = JSON.parse(options.students || '[]');
			this.studentIds = this.students.map(d => d.id);
		},
		onShow() {
			this.getList();
		},
		onPullDownRefresh() {
			this.list = [];
			this.getList();
			uni.stopPullDownRefresh();
		},
		methods: {
			async getList() {
				const res = await this.$api('/study/mobile/personal/center/my/list');
				this.list = res.data;
				const ids = new Set(this.studentIds);
				
				this.list.forEach(info => {
					info.idCardEsensitize = esensitize(info.idCard, 6, 8);
				  if (ids.has(info.id)) {
				    info.checked = true; // 直接修改原对象
				  }
				});
			},

			checkboxChange(e) {
				this.studentIds = e.target.value;
			},

			addOrUpdate(row) {
				uni.navigateTo({
					url: `/pages/my/student-create?id=${row.id}`,
				});
			},

			async confirm() {
				const res = await this.$api('/study/mobile/personal/center/del', 'post', [this.id]);

				if (res.code === 0) {
					uni.showToast({
						icon: 'none',
						title: '删除成功'
					});
					this.getList();
					this.show = false;
				}
			},

			handleDelete(id) {
				this.show = true;
				this.id = id;
			},
			
			handleSelect() {
				this.students = this.list.filter(info => this.studentIds.includes(info.id));
				uni.redirectTo({
					url: `/pages/study/sign-up?eventId=${this.eventId}&students=${JSON.stringify(this.students)}`,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.student {
		margin: 30rpx;

		.plus {
			background-color: #fff;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: space-between;
			padding: 40rpx;
			border-radius: 20rpx;

			.plus-name {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.items {
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #fff;
			padding: 30rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.item-info {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}

			.info {
				margin-left: 20rpx;

				.name {
					font-weight: bold;
				}

				.idcard {
					padding-top: 20rpx;
					font-size: 28rpx;
					color: #666;
				}
			}

			.action {
				display: flex;
				flex-direction: row;
				align-items: center;

				.edit {
					margin-right: 20rpx;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
</style>